<template>
	<view class="" style="width: 100%;min-height: 100vh;">
		<cu-custom :bgColor="'var(--primaryBg)'" isLeft>
			<view  slot="left" >
				<image v-if='isLeft' @click.stop='handleBack' class='back-img' src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501101128200984.png" mode=""></image>
			</view>
			<view slot="content" :style="scrollTop>CustomBar?'color:#fff':''" class="title">
				服务
			</view>
		</cu-custom>
		<view class="box">
			<view class="head">
				<view @click="handleTab(index)" v-for="(item,index) in tabList" :key="index" class="head-item" :class="tabIndex==index?'active':''">
					{{item.name}}
				</view>
			</view>
			<view class="content">
				<!-- 我的服务卡 -->
				<myCard v-if="!tabIndex" :list='list' ref="myCard" @handleUser="handleUser"></myCard>
				<!-- 服务记录 -->
				<record v-if="tabIndex==1" :list='list' @record="handleRecord" ref="record"></record>
				<!-- 服务需求 -->
				<demand v-if="tabIndex==2" :list='list' ref="demand"></demand>
			
			</view>
			<view v-if="tabIndex==2" @click="addDemand" class="add">
				<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181419447233.png" mode=""></image>
				<view @click="addDemand" class="">新增需求</view>
			</view>
		</view>
		<!-- 二维码 -->
		<qrcode ref="qrcode"></qrcode>
		<!-- 服务记录详情 -->
		<recordDetail ref="recordDetail"></recordDetail>
		<!-- 新增需求 -->
		<addDemand ref="addDemand"></addDemand>
		<loginModal ref="loginModal" @loginSuccess="loginSuccess"></loginModal>
	</view>
</template>
 
<script>
	import demand from "@/pages/pet/components/service-buyer-demand.vue"
	import myCard from "@/pages/pet/components/service-buyer-myCard.vue"
	import record from "@/pages/pet/components/service-buyer-record.vue"
	import recordDetail from "@/pages/pet/components/service-buyer-record-detail.vue"
	import addDemand from "@/pages/pet/components/addDemand.vue"
	import qrcode from "@/pages/pet/components/qrcode.vue"
	import util from '@/common/util'
	export default {
		components:{
			qrcode,
			demand,
			myCard,
			record,
			recordDetail,
			addDemand
		},
		props: {
			isLeft: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				scrollTop: 0,
				CustomBar: this.CustomBar,
				tabIndex:0,
				tabList:[{
					name:'我的服务卡',
				},{
					name:'服务记录',
				},{
					name:'服务需求',
				}],
				params:{
					page:1,
					limit:10,
				},
				list:[],
				total:0,
				item:{},
			}
		},
		methods:{
			loginSuccess(){
				this.init()
			},
			handleBack() {
				uni.navigateBack()
			},
			handleTab(index){
				console.log(index,'asdfas')
				this.tabIndex = index
				setTimeout(()=>{
					this.init()
				})
			},
			init(params){
				console.log(params)
				if (!util.isLogin.call(this)) {
					return;
				}
				if(params && params.tabIndex) {
					this.tabIndex = Number(params.tabIndex || this.tabIndex)
				}
				this.$nextTick(() => {
					if(this.tabIndex == 0){
						this.$refs.myCard.init('getEnumList')
					}else if(this.tabIndex == 1){
						this.$refs.record.init()
					}else if(this.tabIndex == 2){
						this.$refs.demand.init()
					}
				})
			},
			onScroll(e){
				this.scrollTop = e.scrollTop
			},
			reachBottom(){
				if(this.tabIndex == 0){
					this.$refs.myCard.reachBottom()
				}else if(this.tabIndex == 1){
					this.$refs.record.reachBottom()
				}else if(this.tabIndex == 2){
					this.$refs.demand.reachBottom()
				}
			},
			handleUser(item){
				if (!util.isLogin.call(this)) {
					return;
				}
				this.$refs.qrcode.handleOpen(item)
			},
			handleRecord(data){
				if (!util.isLogin.call(this)) {
					return;
				}
				if(data.type == 'detail'){
					this.$refs.recordDetail.handleOpen()
				}
				if(data.type == 'detail'){
					this.$refs.recordDetail.handleOpen()
				}
			},
			addDemand(){
				if (!util.isLogin.call(this)) {
					return;
				}
				this.$refs.addDemand.handleOpen({
					success:()=>{
						this.init()
					}
				})
			},
		},
	}
</script>
<style>
	
</style>
<style scoped lang="scss">
	.back-img {
		width: 48rpx;
		height: 48rpx;
		margin-left: 32rpx;
	}
	
	.box{
		width: 100%;
		display: flex;
		flex-direction: column;
		.head{
			width: 100%;
			padding: 12rpx 0 58rpx;
			display: flex;
			background: var(--primaryBg);
			.head-item{
				width: 33.33%;
				position: relative;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--h2Color);
				line-height: 40rpx;
			}
			.active{
				font-weight: 600;
				color: var(--h1Color);
				&::after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: -8rpx;
					transform: translateX(-50%);
					width: 32rpx;
					height: 4rpx;
					background: var(--h1Color);
					border-radius: 3rpx;
				}
			}
		}
		.content{
			flex: 1;
			position: relative;
			width: 100%;
			background: #F8F8F8;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 16rpx;
			box-sizing: border-box;
			top: -28rpx;
			.none{
				width: 100%;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: var(--h4Color);
				line-height: 33rpx;
				margin-top: 40rpx;
			}
		}
		.add{
			position: fixed;
			left: 50%;
			bottom: 206rpx;
			transform: translateX(-50%);
			width: 202rpx;
			height: 80rpx;
			background: var(--primaryGradBg);
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.03);
			border-radius: 40rpx;
			border: 4rpx solid #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}
			view{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: var(--btnColor);
				line-height: 40rpx;
			}
		}
	}
</style>